<template>
  <div>
    <div class="head d-flex align-center justify-space-between">
      <span>运行时长统计</span>
      <div class="select" v-if="customerId">
        <span>采集终端号：</span>
        <el-select v-model="boxNo" placeholder="请选择">
          <el-option
            v-for="item in boxList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="body">
      <v-chart
         v-if="chartOptions"
        :options="chartOptions"
        autoresize
        style="width: 100%;height: 100%"
      ></v-chart>
      <div class="full-height d-flex align-center justify-center">
        <img src="~/assets/images/empty-image.png">
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { boxSelectList, getWorkingTime } from '@/api/customer'
export default {
  props: {
    customerId: Number,
    devideBoxNo: [Number, String]
  },
  data() {
    return {
      chartOptions: null,
      boxList: [],
      boxNo: ''
    }
  },
  watch: {
    boxNo() {
      this.getWorkingTime()
    }
  },
  created() {
    if (this.customerId) {
      this.getBoxSelectList()
    } else {
      this.boxNo = this.devideBoxNo
      this.getWorkingTime()
    }
  },
  methods: {
    createLineOptions(data) {
      if (data && data.length) {
        return {
          grid: { left: 67, right: 62, top: 60, bottom: 30, containLabel: true },
          xAxis: {
            type: 'category',
            data: data[0].data.map(item => {
              return item.date
            }),
            boundaryGap: false,
            axisLine: { lineStyle: { color: '#E9E9E9' } },
            axisTick: { show: false },
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.45)',
              rotate: 70
            }
          },
          yAxis: {
            type: 'value',
            axisLine: { lineStyle: { color: '#E9E9E9' } },
            axisTick: { show: false },
            axisLabel: { color: 'rgba(0, 0, 0, 0.45)' },
            splitLine: { show: false }
          },
          series: [
            {
              data: data[0].data.map(item => {
                return item.value
              }),
              type: 'line',
              symbol: 'none',
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#1890FF',
                    width: 2
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 1,
                      color: 'rgba(24, 144, 255, 0.1)'
                    }])
                  }
                }
              }
            }
          ]
        }
      } else {
        return null
      }
    },
    getBoxSelectList() {
      boxSelectList(this.customerId).then(res => {
        this.boxList = res.data.filter(item => {
          return item !== ''
        })
        if (this.boxList.length) {
          this.boxNo = this.boxList[0]
        } else {
          this.boxNo = ''
        }
      })
    },
    getWorkingTime() {
      if (this.boxNo) {
        getWorkingTime(this.boxNo).then(res => {
          this.chartOptions = this.createLineOptions(res.data)
        })
      } else this.chartOptions = null
    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  padding: 14px 20px;
  color: #262626;
  font-size: 16px;
  border-bottom: 1px solid #E9E9E9;
}
.body {
  height: 604px;
}
</style>